<template>
  <div>
    <!-- 个性推荐 -->
    <div class="conts">
      <div class="das">
        <carousel :datas="imgs"></carousel>
        <!-- 推荐歌单 -->
        <div class="tujian">
          <!-- 推荐 -->
          <ul class="biaoti">
            <li><span>推荐歌单</span></li>
            <li><img src="../assets/fhs.png" alt="" /></li>
          </ul>
        </div>
        <gedan :gedan="recommendation"></gedan>
        <div class="tujian">
          <!-- 推荐 -->
          <ul class="biaoti">
            <li><span>热门播客</span></li>
            <li><img src="../assets/fhs.png" alt="" /></li>
          </ul>
        </div>
        <blogs :blogsdata="hotBoke"></blogs>
        <div class="tujian">
          <!-- 推荐 -->
          <ul class="biaoti">
            <li><span>独家播放</span></li>
            <li><img src="../assets/fhs.png" alt="" /></li>
          </ul>
        </div>
        <exclusive :exclusivedata="exclusive"></exclusive>
        <div class="tujian">
          <ul class="biaoti">
            <li><span>最新音乐</span></li>
            <li><img src="../assets/fhs.png" alt="" /></li>
          </ul>
        </div>
        <newest :newest="newest"></newest>
      </div>
    </div>
  </div>
</template>

<script>
import carousel from "../components/home/Carousels.vue";
import gedan from "../components/home/gedan.vue";
import blogs from "../components/home/blogs.vue";
import exclusive from "../components/home/exclusive.vue";
import newest from "../components/home/newest.vue";
import API from "../http/API";
export default {
  name: "Recommendation",
  components: {
    carousel,
    gedan,
    blogs,
    exclusive,
    newest,
  },
  watch: {},
  data() {
    return {
      imgs: [
        { img: require("../assets/img/109951166916281208.jpg") },
        { img: require("../assets/img/109951166916310761.jpg") },
        { img: require("../assets/img/109951166916344572.jpg") },
        { img: require("../assets/img/109951166916355315.jpg") },
        { img: require("../assets/img/109951166916385853.jpg") },
        { img: require("../assets/img/109951166916556607.jpg") },
      ],
      gedan: [
        {
          img: require("../assets/tjlb/109951166383336403.jpg"),
          tltie: "爆燃说唱｜炸裂技术流教学",
          bofang: "10万",
        },
        {
          img: require("../assets/tjlb/109951166536432691.jpg"),
          tltie: "【治愈晚风 让我做你的天使】",
          bofang: "20万",
        },
        {
          img: require("../assets/tjlb/109951166572047043.jpg"),
          tltie: "日子需要我们积极向上",
          bofang: "30万",
        },
        {
          img: require("../assets/tjlb/109951166665933162.jpg"),
          tltie: "日子需要我们积极向上",
          bofang: "30万",
        },
        {
          img: require("../assets/tjlb/109951166659498290.jpg"),
          tltie: "『国风纯音』宫商角徵 史诗震撼 恢弘大气",
          bofang: "30万",
        },
        {
          img: require("../assets/tjlb/109951166710178037.jpg"),
          tltie: "2022 全新的我",
          bofang: "35万",
        },
        {
          img: require("../assets/tjlb/109951166745339210.jpg"),
          tltie: "一些好听到爆的中文rap",
          bofang: "35万",
        },
        {
          img: require("../assets/tjlb/109951166633118539.jpg"),
          tltie: "那些好听到爆炸的歌曲",
          bofang: "35万",
        },
        {
          img: require("../assets/tjlb/109951166887745088.jpg"),
          tltie: "那些让人无法抵触的说唱",
          bofang: "35万",
        },
        {
          img: require("../assets/tjlb/109951166467562743.jpg"),
          tltie: "男声 | 好听到单曲循环的华语歌单（上）",
          bofang: "35万",
        },
      ],
      blogs: [],
      exclusive: [
        {
          img: require("../assets/duj/109951166920099584.jpg"),
          tltie: "《乐评故事》EPO5:不想停止爱这件事",
        },
        {
          img: require("../assets/duj/109951166920156551.jpg"),
          tltie: "《超级封面》第250期孙燕姿：在对面听对的歌",
        },
        {
          img: require("../assets/duj/109951166921707002.jpg"),
          tltie: "《今日营业中》EP54点播版：傻子与白痴 那些年被嘲笑的梦想",
        },
      ],
      newest: [
        {
          img: require("../assets/boloke/109951166317317232.jpg"),
          tltle: "IDK",
          name: "满舒克",
        },
        {
          img: require("../assets/boloke/109951166501048362.jpg"),
          tltle: "无法离地飞行",
          name: "痛仰乐队",
        },
        {
          img: require("../assets/boloke/109951166637027173.jpg"),
          tltle: "毫无逻辑",
          name: "刘端琦",
        },
        {
          img: require("../assets/boloke/109951166639606532.jpg"),
          tltle: "人间剧场",
          name: "韩红",
        },
        {
          img: require("../assets/boloke/109951166714992105.jpg"),
          tltle: "替我说",
          name: "王一博",
        },
        {
          img: require("../assets/boloke/109951166755877173.jpg"),
          tltle: "天明",
          name: "GAI周挺",
        },
        {
          img: require("../assets/tjlb/109951166383336403.jpg"),
          tltle: "朝来袭",
          name: "Aimer",
        },
        {
          img: require("../assets/tjlb/109951166467562743.jpg"),
          tltle: "PAINT",
          name: "i Dont Like Mondays",
        },
        {
          img: require("../assets/tjlb/109951166572047043.jpg"),
          tltle: "云上花海路",
          name: "麻园诗人",
        },
        {
          img: require("../assets/tjlb/109951166710178037.jpg"),
          tltle: "Gasoline",
          name: "The Weeked",
        },
        {
          img: require("../assets/tjlb/109951166887745088.jpg"),
          tltle: "I Ding Everything",
          name: "David Bowie",
        },
        {
          img: require("../assets/tjlb/109951166659498290.jpg"),
          tltle: "用完了 feat Dbo",
          name: "钱正昊/Dbo",
        },
      ],
      //推荐推荐
      recommendation: [],
      //热门博客
      hotBoke: [],
    };
  },
  created() {
    this.ONrecommendation();
    this.onHotBoke();

    // 定义事件,注意箭头函数应用监听vuex的数据变化
    this.$store.watch(
      (state) => state.denglo,
      (value) => {
        if (value) {
          this.loginHttp()
            .then(() => {})
            .catch((e) => {
              // console.log(e);
            });
        } else {
          this.nologinHttp();
        }
      }
    );
  },
  methods: {
    //需要登录的方法
    async loginHttp() {
      this.recommendation = [];
      this.$get(API.RECOMMEND_RESOURCE,).then((data) => {
        // console.log(data)
        //有12条数据
        // console.log(data);
        // console.log("1");
        // console.log("需要登录的");
        //拿到以前保存的时间进行判断
        let previouslyDate = JSON.parse(
          localStorage.getItem("logpreviouslyDate")
        );

        // console.log(previouslyDate);
        if (previouslyDate == null) {
          //判断有没有保存时间 没有就进入第一次让他进行保存时间
          this.tjdatesmo().then((dates) => {
            // console.log(dates);
            return this.Shujs(data.recommend.length).then((e) => {
              for (let index = 0; index < 9; index++) {
                this.recommendation.push(data.recommend[e[index] - 1]);
              }
              // console.log(this.recommendation);
              //保存当前今天的随机数
              // localStorage.setItem("logpreviouslyDate", JSON.stringify(dates));
              // localStorage.setItem("lograndom", JSON.stringify(e));

              localStorage.setItem("logJT",JSON.stringify(this.recommendation));
              localStorage.setItem("logZT", JSON.stringify(data.recommend));
              localStorage.setItem("logpreviouslyDate", JSON.stringify(dates));
              localStorage.setItem("lograndom", JSON.stringify(e));
            });
          });
        } else {
          //有时间了就进行判断
          // console.log("有时间的");

          this.tjdatesmo().then((dates) => {
            // //先让他进行false 不进行数据的重新获取 判断日期是不是同一天
            //拿到保存的时间

            //分别代表了年月日  如果ARS的三给数组的数值都是true的话就代表全部全部日期是相等的
            let ARS = [false, false, false];

            for (let index = 0; index < dates.length; index++) {
              if (previouslyDate[index] == dates[index]) {
                ARS[index] = true;
              }
            }

            if (ARS[0] == false || ARS[1] == false || ARS[2] == false) {
              //如果不相等就生成随机数

              this.Shujs(data.recommend.length).then((e) => {
                //查看当前还欠缺多少个数
                let qian = 9 - e.length;

                //拿到昨天数据进行循环
                let ztData = JSON.parse(localStorage.getItem("logZT"));

                if (e.length < 9) {
                  // console.log("小于");
                  for (let index = 0; index < e.length; index++) {
                    this.recommendation.push(data.recommend[e[index] - 1]);
                  }

                  this.Shujs(ztData.length).then((zt) => {
                    for (let i = 0; i < qian; i++) {
                      this.recommendation.push(ztData[zt[i] - 1]);
                    }
                    localStorage.setItem(
                      "logJT",
                      JSON.stringify(this.recommendation)
                    );
                  });

                  //保存今天的缓存数据
                  localStorage.setItem(
                    "logJT",
                    JSON.stringify(this.recommendation)
                  );
                  localStorage.setItem("logZT", JSON.stringify(data.recommend));
                  localStorage.setItem(
                    "logpreviouslyDate",
                    JSON.stringify(dates)
                  );
                  localStorage.setItem("lograndom", JSON.stringify(e));
                  return;
                }

                for (let index = 0; index < 9; index++) {
                  this.recommendation.push(data.recommend[e[index] - 1]);
                }

                localStorage.setItem(
                  "logJT",
                  JSON.stringify(this.recommendation)
                );
                localStorage.setItem("logZT", JSON.stringify(data.recommend));
                localStorage.setItem(
                  "logpreviouslyDate",
                  JSON.stringify(dates)
                );
                localStorage.setItem("lograndom", JSON.stringify(e));
                // console.log(this.recommendation);
                //保存当前今天的随机数
                return;
              });

              return;
            }

            // console.log(localStorage.getItem("logJT"));
            this.recommendation = JSON.parse(localStorage.getItem("logJT"));
            // console.log(this.recommendation);

            let isderandom = JSON.parse(localStorage.getItem("lograndom"));
            // console.log(isderandom);
          });
        }
      });
    },

    nologinHttp() {
      this.recommendation = [];
      this.$get(API.PERSOBALIZED).then((data) => {
        // console.log(data);

        //拿到以前保存的时间进行判断
        let previouslyDate = JSON.parse(
          localStorage.getItem("nologopreviouslyDate")
        );
        // console.log(previouslyDate);
        if (previouslyDate == null) {
          //判断有没有保存时间 没有就进入第一次让他进行保存时间
          this.tjdatesmo().then((dates) => {
            // console.log(dates);
            this.Shujs(data.result.length).then((e) => {
              for (let index = 0; index < 9; index++) {
                this.recommendation.push(data.result[e[index] - 1]);
              }
              //保存当前今天的随机数
                localStorage.setItem("JT",JSON.stringify(this.recommendation));
                  localStorage.setItem("ZT", JSON.stringify(data.recommend));
                  localStorage.setItem("previouslyDate", JSON.stringify(dates));
                  localStorage.setItem("random", JSON.stringify(e));
            });
          });
          // console.log(this.recommendation);
        } else {
          //有时间了就进行判断

          this.tjdatesmo().then((dates) => {
            // //先让他进行false 不进行数据的重新获取 判断日期是不是同一天
            //拿到保存的时间

            //分别代表了年月日  如果ARS的三给数组的数值都是true的话就代表全部全部日期是相等的
            let ARS = [false, false, false];

            for (let index = 0; index < dates.length; index++) {
              if (previouslyDate[index] == dates[index]) {
                ARS[index] = true;
              }
            }

            if (ARS[0] == false || ARS[1] == false || ARS[2] == false) {
              //如果不相等就生成随机数

              this.Shujs(data.result.length).then((e) => {
                //查看当前还欠缺多少个数
                let qian = 9 - e.length;

                //拿到昨天数据进行循环

                if (e.length < 9) {
                  let ztData = JSON.parse(localStorage.getItem("ZT"));
                  // console.log("小于");
                  for (let index = 0; index < e.length; index++) {
                    this.recommendation.push(data.result[e[index] - 1]);
                    // console.log(this.recommendation);
                  }

                  this.Shujs(ztData.length).then((zt) => {
                    for (let i = 0; i < qian; i++) {
                      this.recommendation.push(ztData[zt[i] - 1]);
                      // console.log(this.recommendation);
                    }
                    localStorage.setItem(
                      "JT",
                      JSON.stringify(this.recommendation)
                    );
                  });

                  //保存今天的缓存数据
                  localStorage.setItem("JT",JSON.stringify(this.recommendation));
                  localStorage.setItem("ZT", JSON.stringify(data.recommend));
                  localStorage.setItem("previouslyDate", JSON.stringify(dates));
                  localStorage.setItem("random", JSON.stringify(e));
                  return;
                }
                // console.log("没有进去");

                for (let index = 0; index < 9; index++) {
                  this.recommendation.push(data.result[e[index] - 1]);
                }
                // console.log(this.recommendation);

                localStorage.setItem("JT", JSON.stringify(this.recommendation));
                localStorage.setItem("ZT", JSON.stringify(data.result));
                localStorage.setItem("previouslyDate", JSON.stringify(dates));
                localStorage.setItem("random", JSON.stringify(e));
                // console.log(this.recommendation);
                //保存当前今天的随机数
                return;
              });

              return;
            }

        

            //如果都日期都相同就进入把随机数进行赋值拿到数据渲染

            let isderandom = JSON.parse(localStorage.getItem("random"));
            // console.log(isderandom);
            // console.log("今天的");

            this.recommendation = JSON.parse(localStorage.getItem("JT"));

            // console.log(this.recommendation);
            // console.log(data.recommend);
            // console.log(this.recommendation);
          });
        }
      });
    },

    ONrecommendation() {
      // console.log(this.$store.state.denglo);
      if (!this.$store.state.denglo) {
        this.nologinHttp();
      } else {
        //需要登录的
        this.loginHttp();
      }
    },
    //热门播客
    onHotBoke() {
      //装第一次生成的数据随机数的

      if (!localStorage.getItem("HotBoke")) {
        this.onHotBokedata();
      } else {
        this.datasms().then((e) => {
          // console.log(e);
          if (e >= 1) {
            return this.onHotBokedata();
          }
          this.hotBoke = JSON.parse(localStorage.getItem("hotBokeData"));
          // console.log(this.hotBoke);
        });
      }
    },
    //网络请求数据
    onHotBokedata() {
      // console.log("网络请求");
      this.$get(API.DJ_HOT, {
        limit: 100,
      }).then((data) => {
        // console.log(data.djRadios);

        this.Shujs(data.djRadios.length).then((e) => {
          for (let index = 0; index < 6; index++) {
            this.hotBoke.push(data.djRadios[e[index] - 1]);
          }
          var timestamp = Date.parse(new Date());
          localStorage.setItem("hotBokeData", JSON.stringify(this.hotBoke));
          localStorage.setItem("HotBoke", timestamp);
          // console.log(original);
        });
      });
    },

    //随机数的封装

    async Shujs(e) {
      // console.log(e);
      var count = e;
      //原始数组
      var original = new Array();
      //给原始数组original赋值
      for (var i = 0; i < count; i++) {
        original[i] = i + 1;
      }

      //排序
      original.sort(function () {
        return 0.5 - Math.random();
      });

      // console.log(original);
      return original;
    },

    //时间搓的对比
    async datasms() {
      var stime = localStorage.getItem("HotBoke");

      var etime = Date.parse(new Date());
      var usedTime = etime - stime; //两个时间戳相差的毫秒数
      var days = Math.floor(usedTime / (24 * 3600 * 1000));
      //计算出小时数
      var leave1 = usedTime % (24 * 3600 * 1000); //计算天数后剩余的毫秒数
      var hours = Math.floor(leave1 / (3600 * 1000));
      //计算相差分钟数
      var leave2 = leave1 % (3600 * 1000); //计算小时数后剩余的毫秒数
      var minutes = Math.floor(leave2 / (60 * 1000));
      var time = days + "天" + hours + "时" + minutes + "分";
      return minutes;
    },
    //获取当年年份月份日期的
    async tjdatesmo() {
      var date = new Date();
      let dates = [];
      var year = date.getFullYear();
      dates.push(year);
      // // 获取当前月份
      var nowMonth = date.getMonth() + 1;
      dates.push(nowMonth);
      // 获取当前是几号
      var strDate = date.getDate();
      dates.push(strDate);
      return dates;
    },
  },
};
</script>

<style lang="less" scoped>
@keyframes one-in {
  from {
    padding-left: 100%;
  }
  to {
    padding-left: 0%;
  }
}
.biaoti {
  display: flex;
  align-items: center;
  li {
    &:nth-child(1) {
      span {
        font-size: 20px;
        font-weight: 550;
      }
    }
    &:nth-child(2) {
      width: 20px;
      height: 20px;
      transform: rotate(180deg);
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
.conts {
  .das {
    padding-top: 80px;
    max-width: 1200px;
    padding-bottom: 140px;
  }

  @media only screen and (min-width: 800px) {
    // background-color:green;

    .das {
      //  max-width: 70%;

      margin: 0 auto;
      min-width: 650px;
      // border: 1px solid #000;
    }
  }

  .tujian {
    margin-bottom: 20px;
    margin-top: 10px;
  }
}
.el-col {
  border-radius: 4px;
}

.mos {
  // width: 70%;
  margin: 0 auto;
  background-color: aqua;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>